How to Add White Background to Print to PDF

Introduction

This document will explain how to add the capability to print your dark mode background app as a light theme background.

Use Case

A typical use case for this type of feature is to be able to download a PDF of the application. See examples below.

How to Implement the Code?

In the following example, the application directory is as follows:

1. Within your chart options directory, WITSSummaryChart/index.js directory for this example, initialize the const theme:

const theme = useTheme();

2. Within the same index.js file, add theme to the getHighchartsOptions function:

  return useMemo(() => {
    const options = getHighchartsOptions({ data, dataset, theme });

3. Within your chart options directory, WITSSummaryChart/options.js directory for this example, add theme to the arguments, remove backgroundColor: theme.isLightTheme ? '#fff' : '#333333' from chart and paste it into the return of the function. See example below.

export function getHighchartsOptions({ data, dataset, theme }) {
  const series = [
    {
      name: dataset,
      data: data.map(witsRecord => ({
        x: witsRecord.timestamp * 1000,
        y: witsRecord.data.hole_depth,
        name: witsRecord.data.state,
      })),
      turboThreshold: 20000,
    },
  ];

  return {
    ...defaultHighchartsOptions,
    chart: { backgroundColor: theme.isLightTheme ? '#fff' : '#333333',},
    title: { text: `Example ${dataset} chart`, style: { color: 'white' } },
    series,
  };
}

4. Your application should now print out with a light theme. See example below.